<template>
	<view class="content">
		<view class="p-t-30">
			<view class="card">
				<view class="color-3E80E5 fs-32">
					问题描述
				</view>
				<view class="question m-t-14">
					<textarea class="question-content fs-26" v-model="submit.content" :placeholder="placeholder"
						placeholder-class="color-CCCCCC">
					</textarea>
				</view>
			</view>
		</view>
		<view class="p-t-30">
			<view class="card relative">
				<view class="flex align-center answer-title ">
					<view class="flex color-3E80E5  fs-32">
						问题截图
					</view>
				</view>
				<view class="answer m-t-14">
					<uni-file-picker v-model="images" file-mediatype="image" mode="grid" file-extname="png,jpg"
						:auto-upload="false" :limit="9" @select="select" />

				</view>
			</view>
		</view>
		<view class="recharge_submit" @click="submitbtn">
			提交
		</view>

		<view style="position: relative;">
			<by-nike-avtar ref="login"></by-nike-avtar>
		</view>
	</view>
</template>

<script>
	import {
		upload
	} from '../../API/upload.js'
	import {
		feedback
	} from '../../API/feedback.js'
	export default {
		data() {
			return {
				placeholder: "详细描述问题或建议",
				images: [],
				submit: {
					content: "",
					images: [],
				},
				tempFilePaths: []
			}
		},
		onshow() {
			let pages = getCurrentPages();
			let options = (pages[pages.length - 1]).options;
		},
		methods: {

			async submitbtn() {
				if (!this.submit.content) {
					uni.showToast({
						title: '请描述问题',
						icon: 'none'
					});
					return;
				}
				this.submit.images = this.images.map(i => {
					return i.url;
				})
				if (this.submit.images.length != this.images.length || !this.submit.images.length) {
					uni.showToast({
						title: '上传截图或等待上传完成',
						icon: 'none'
					});
					return;
				}
				let _this = this;
				let res = await feedback(_this.submit);
				if (res.code == 200) {

					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					_this.images = [];
					_this.submit = {
						content: "",
						images: [],
					};
					_this.tempFilePaths = [];
					setTimeout(()=>{
						_this.Gotab('/pages/my/my');
					},1000);
				}

			},
			// 获取上传状态
			async select(e) {
				let _this = this;
				_this.tempFilePaths.push(e.tempFilePaths[0]);
				let url = await upload(e.tempFilePaths[0]);
				_this.images.push({
					"name": e.tempFiles[0].name,
					"extname": e.tempFiles[0].extname,
					"url": 'https://zm.quya.vip/storage/' + url
				});
				_this.submit.images.push(url);
				console.log('选择文件：', e.tempFilePaths[0], _this.submit.images);
			},
		}
	}
</script>

<style scoped>
	.content {
		background: linear-gradient(0deg, #CDF1F7, #BCDFFD, #CFDBFF);
		min-height: 100vh;
	}

	.card {
		min-height: 300upx;
		width: 690upx;
		margin: 0 auto;
		box-sizing: border-box;
		background-color: #e5edff;
		border-radius: 30upx;
		padding: 35upx;
	}

	.question {
		min-height: 260upx;
		padding: 32upx 44upx 15upx 32upx;
		box-sizing: border-box;
		border-radius: 30upx;
		background-color: #fff;
	}

	.question-content {
		height: 150upx;
		min-height: 150upx;
		width: 100%;
	}

	.question-option {
		height: 60upx;
		padding: 0 34upx;
		border: 1px solid #9887FF;
		color: #9887FF;
		border-radius: 30px;
	}

	.question-option.primary {
		background: #3E80E5;
		border-color: #3E80E5;
		color: #fff;
	}

	.answer {
		min-height: 200upx;

		padding: 32upx 44upx 15upx 32upx;
		/* padding: 69upx 44upx 79upx 32upx; */
		box-sizing: border-box;
		border-radius: 30upx;
		background-color: #fff;
	}

	.answer-content {
		/* min-height: 116upx; */
		width: 100%;
	}

	.answer-option {
		height: 60upx;
		padding: 0 34upx;
		border: 1px solid #9887FF;
		color: #9887FF;
		border-radius: 30px;
	}

	.AI-img {
		position: absolute;
		width: 186upx;
		height: 222upx;
		top: -65upx;
		left: 9upx;
	}

	.recharge_submit {
		margin: 0 auto;
		margin-top: 68upx;
		width: 645upx;
		height: 90upx;
		background: #3E80E5;
		color: #fff;
		border-radius: 45upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	/* -------- */
	.relative {
		position: relative;
	}

	.p-t-30 {
		padding-top: 30upx;
	}

	.p-t-85 {
		padding-top: 85upx;
	}

	.m-t-26 {
		margin-top: 26upx;
	}

	.m-l-180 {
		margin-left: 180upx;
	}

	.m-t-34 {
		margin-top: 34upx;
	}

	.m-t-14 {
		margin-top: 14upx;
	}

	.flex {
		display: flex;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.flex-1 {
		flex: 1;
	}

	.align-center {
		align-items: center;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.gap-16 {
		gap: 16upx;
	}

	.fs-32 {
		font-size: 32upx;
	}

	.fs-40 {
		font-size: 40upx;
	}

	.color-3E80E5 {
		color: #3E80E5;
	}

	.fs-26 {
		font-size: 26upx;
	}

	.color-CCCCCC {
		color: #CCCCCC;
	}
</style>